<template>
  <div class="salesEbm">
    <div class="title">
      <stitle :bg="bg" text="各部门销售业绩统计" :type="0" />
    </div>
    <el-row :gutter="20" style="position: relative;">
      <el-col :span="4">
    <el-button size="mini" :class="change?'xuanzh':''" @click="chbt(1)">销量</el-button>
      </el-col>
      <el-col :span="4">
    <el-button size="mini" :class="change?'':'xuanzh'" @click="chbt(2)">销售额</el-button>
      </el-col>
      <el-col :span="7">
        <el-select size="mini" v-model="value" placeholder="请选择">
    <el-option
      v-for="item in select"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
      </el-col>
    </el-row>
    <div id="echartSalesEbm"></div>
  </div>
</template>

<script>
import stitle from "@/components/common/stitle";
export default {
  name: "salesEbm",
  components: {
    stitle,
  },
  data() {
    return {
      bg: require("@/assets/images/DispatchCommand/stitle.png"),
      select: [{
          value: '0',
          label: '当年'
        }, {
          value: '1',
          label: '次年'
        }],
        value: '0',
        change: true,
    };
  },
  mounted() {
    this.setEchart();
  },
  methods: {
    setEchart() {
      const _echarts = this.$echarts.init(
        document.getElementById("echartSalesEbm")
      );
      const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {textStyle: {  // 图例的字体样式
			  color: '#fff'
			},},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top:"15%",
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
         axisLabel: {
            textStyle: {
              color: "#fff",
              fontSize: 12,
            },
          },
  axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
      data: ["桐乡",
            "山东",
            "第五",
            "新韩",
            "复合",
           "桐乡",
            "山东",
            "第五",
            "新韩",
            "复合",
            "桐乡",
            "山东",
            "第五",
            "新韩"]
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#fff",
              fontSize: 12,
            },
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#305383"],
              width: 1,
              type: "solid",
            },
          },
    }
  ],
  series: [
    {
      name: '胶水',
      type: 'bar',
      barWidth: 5,
      stack: 'Search Engine',
      emphasis: {
        focus: 'series'
      },
      data: [620, 732, 701, 734, 1090, 1130, 1120,90,80,70,90,135,110,155]
    },
    {
      name: '油墨',
      type: 'bar',
      stack: 'Search Engine',
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 290, 230, 220,90,80,70,90,135,110,155]
    },
    {
      name: '电子油墨',
      type: 'bar',
      stack: 'Search Engine',
      emphasis: {
        focus: 'series'
      },
      data: [60, 72, 71, 74, 190, 130, 110,90,80,70,90,135,110,155]
    },
    {
      name: '树脂',
      type: 'bar',
      stack: 'Search Engine',
      emphasis: {
        focus: 'series'
      },
      data: [62, 82, 91, 84, 109, 110, 120,90,80,70,90,135,110,155]
    }
  ]
};
      _echarts.setOption(option);
    },
    chbt(type){
      if(type==1){
        this.change = true
      }else if(type==2){
        this.change = false
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.salesEbm {
  width: 450px;
  float: left;
  padding-left: 10px;
  box-sizing: border-box;
  .title {
    width: 370px;
  }
  #echartSalesEbm {
    width: 100%;
    height: 230px;
  }
  /deep/ .el-select .el-input__inner {
    background-image: url("../../../assets/images/modelimg/slb.png");
    background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  }
  /deep/ .el-input__inner {
    background-color: unset;
    border: unset;
    color: #fff;
  }
  /deep/ .el-button{
    background:unset;
    background-image: url("../../../assets/images/modelimg/初始.png");
    background-size: 100% 100%;
      cursor: pointer;
  color: #fff;
  }
  .xuanzh{
    background-image: url("../../../assets/images/modelimg/点击.png");
    background-size: 100% 100%;
      cursor: pointer;
color: #fff;
  }
}
</style>
